<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - eBusiness</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/slider.js}"></script>
</head>
<body>
    <div th:replace="~{common/header :: header}"></div>

    <div class="slider-container">
        <div class="slides">
            <img th:src="@{/images/1.jpg}" alt="Slide 1" class="slide active">
            <img th:src="@{/images/2.png}" alt="Slide 2" class="slide">
            <img th:src="@{/images/3.png}" alt="Slide 3" class="slide">
        </div>
        <div class="navigation-arrows">
            <span class="prev-arrow">&#10094;</span>
            <span class="next-arrow">&#10095;</span>
        </div>
        <div class="pagination-dots">
            <span class="dot active" data-slide="0"></span>
            <span class="dot" data-slide="1"></span>
            <span class="dot" data-slide="2"></span>
        </div>
    </div>

    <div class="category-search-bar-container">
        <div class="main-nav">
            <ul>
                <li><a th:href="@{/index}">首页</a></li>
                <li th:each="type : ${goodsTypes}"><a th:href="@{/category(typeId=${type.id})}" th:text="${type.typename}"></a></li>
            </ul>
        </div>
        <div class="header-search">
            <form th:action="@{/search}" method="get">
                <input type="text" name="keyword" placeholder="请输入关键词" th:value="${keyword}">
                <button type="submit">搜索</button>
            </form>
        </div>
    </div>

    <div class="main-content">
        <div class="user-info-container">
            <div class="user-info-header">
                <h2>用户信息</h2>
            </div>
            <form id="updatePersonalInfoForm" th:action="@{/updatePersonalInfo}" method="post">
                <div class="form-group">
                    <label for="bemail">邮箱</label>
                    <input type="email" id="bemail" name="bemail" th:value="${user.bemail}" readonly class="form-control">
                </div>
                <div class="form-group">
                    <label for="newPassword">密码</label>
                    <input type="password" id="newPassword" name="newPassword" placeholder="请输入您的新密码" class="form-control">
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-success">修改密码</button>
                    <button type="reset" class="btn btn-secondary">重置</button>
                </div>
                <p th:if="${message}" class="form-message success" th:text="${message}"></p>
                <p th:if="${error}" class="form-message error" th:text="${error}"></p>
            </form>
        </div>
    </div>

    <div th:replace="~{common/footer :: footer}"></div>

    <script>
        $(document).ready(function() {
            // AJAX for Update Personal Info (Password Change)
            $('#updatePersonalInfoForm').submit(function(event) {
                event.preventDefault(); // Prevent default form submission

                const form = $(this);
                const url = form.attr('th:action') || form.attr('action');
                const newPassword = form.find('input[name="newPassword"]').val();

                // Simple validation
                if (!newPassword) {
                    alert('请输入您的新密码。');
                    return;
                }

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: { newPassword: newPassword },
                    success: function(response) {
                        alert(response.message);
                        if (response.success) {
                            form.find('input[name="newPassword"]').val(''); // Clear password field on success
                        }
                    },
                    error: function(xhr) {
                        const response = JSON.parse(xhr.responseText);
                        alert(response.message || '修改密码失败，请稍后再试！');
                    }
                });
            });
        });
    </script>
</body>
</html> 